<template>
    <div>
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    fixed
                    prop="empno"
                    label="编号"
                    >
            </el-table-column>
            <el-table-column
                    prop="ename"
                    label="姓名"
                    >
            </el-table-column>
            <el-table-column
                    prop="job"
                    label="岗位"
            >
            </el-table-column>
            <el-table-column
                    prop="mgr"
                    label="领导编号"
                    >
            </el-table-column>
            <el-table-column
                    prop="hiredate"
                    label="入职日期"
                    >
            </el-table-column>
            <el-table-column
                    prop="sal"
                    label="薪水"
            >
            </el-table-column>
            <el-table-column
                    prop="dept.dname"
                    label="部门"
            >
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button  type="text" size="small">查看</el-button>
                    <el-button type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "Index",
        data() {
            return {
                tableData: [],
                total:0,
                pageSize: 5,
                currentPage: 1,
            }
        },
        //页面加载完毕后执行的方法
        created() {
            this.initTable();
        },
        //自定义的方法
        methods:{
             initTable(){
                 this.$http.get("/emp/getAll/"+this.currentPage+"/"+this.pageSize).then(result=>{
                       this.tableData=result.data.data.records;
                       this.total=result.data.data.total;
                 })
             },
            handleSizeChange(val) {
                 this.pageSize=val;
                 this.initTable();
            },
            handleCurrentChange(val) {
                this.currentPage=val;
                this.initTable();
            }
        }

    }
</script>

<style scoped>

</style>
